<%--
  Created by IntelliJ IDEA.
  User: Gridsum
  Date: 2021/8/29
  Time: 16:49
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<jsp:include page="menu.jsp"/>
<div id="myGrade">
    <h3>我的成绩列表</h3>
    <div>
        <el-collapse v-model="activeNames" @change="handleChange"  style="display: flex">
            <el-collapse-item :title="season" :name="index" v-for="(season, index) in Object.keys(myGradeList)" style="width: 500px; color: red">
                <p v-for="grade in myGradeList[season]">
                    {{ grade.subject + ': ' + grade.grade }}
                </p>
            </el-collapse-item>
        </el-collapse>
    </div>
</div>
<script>

    var app = new Vue({
            el: '#myGrade',
            data() {
                return {
                    myGradeList: {
                        '2017-1': [
                            {
                                subject: '数学',
                                grade: 120,
                            }, {
                                subject: '数学',
                                grade: 120,
                            }, {
                                subject: '数学',
                                grade: 120,
                            }, {
                                subject: '数学',
                                grade: 120,
                            },
                        ],
                        '2017-2': [
                            {
                                subject: '数学',
                                grade: 120,
                            }, {
                                subject: '数学',
                                grade: 120,
                            }, {
                                subject: '数学',
                                grade: 120,
                            }, {
                                subject: '数学',
                                grade: 120,
                            },
                        ],
                        // '2017-3': [
                        //   {
                        //     subject: '数学',
                        //     grade: 120,
                        //   }, {
                        //     subject: '数学',
                        //     grade: 120,
                        //   }, {
                        //     subject: '数学',
                        //     grade: 120,
                        //   }, {
                        //     subject: '数学',
                        //     grade: 120,
                        //   },
                        // ],
                        // '2017-4': [
                        //   {
                        //     subject: '数学',
                        //     grade: 120,
                        //   }, {
                        //     subject: '数学',
                        //     grade: 120,
                        //   }, {
                        //     subject: '数学',
                        //     grade: 120,
                        //   }, {
                        //     subject: '数学',
                        //     grade: 120,
                        //   },
                        // ],'2017-5': [
                        //   {
                        //     subject: '数学',
                        //     grade: 120,
                        //   }, {
                        //     subject: '数学',
                        //     grade: 120,
                        //   }, {
                        //     subject: '数学',
                        //     grade: 120,
                        //   }, {
                        //     subject: '数学',
                        //     grade: 120,
                        //   },
                        // ],
                    },
                };
                activeNames: '0'
            },
            methods: {
                async getMyGradeList() {
                    const data = await axios.get('/student/getMyGrade')
                    this.myGradeList = data.data.list
                }
            }
            ,
            mounted() {
                this.getMyGradeList()
            }
            ,
        })
    ;
</script>
</body>
</html>
